< <template>
	<head-f></head-f>
	<view class="detil-div"></view>
	<view class="d-content">
		<view class="swiper-ima">
			<swiper class="swiper " circular :current="lunboima">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../common/images/demo.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../common/images/woman.jpg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../common/images/内容001.png"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="suoluetu">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view-item_H" @click="changelunbo($event,index)"
					v-for="(item,index) in [0,1,2,3,4,5,6]" :class="{'huise':index!=huise}">
					<image src="../../common/images/demo.png" :id="index"></image>
				</view>

			</scroll-view>
		</view>

		<view class="introduce">
			<view>
				<text>【毛孩站起來】貓貓瞬效除臭啧霧</text>
			</view>
			<view>
				扣後最低 <text>$330</text>
				<text> $560</text>
			</view>

		</view>
		<view>{{demoo}}</view>
		<view class="baozheng">
			<view>
				<svg t="1727229574222" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="3684" width="20px" height="20px">
					<path
						d="M552.435 533.572v34.369h34.37v-34.369h-34.37zM120.294 761.271c0-5.387 0.458-10.656 1.261-15.752H86.897a130.214 130.214 0 0 0-0.973 15.752c0 6.3 0.458 12.548 1.317 18.617h34.828a99.542 99.542 0 0 1-1.775-18.617z m432.141-90.22v27.897a40.17 40.17 0 0 1-0.515 6.472h34.594c0.179-2.12 0.291-4.296 0.291-6.472v-27.897h-34.37z m-201.119 74.468h-34.658c0.803 5.096 1.261 10.365 1.261 15.752a99.45 99.45 0 0 1-1.776 18.617h34.828a133.133 133.133 0 0 0 1.317-18.617 129.999 129.999 0 0 0-0.972-15.752z"
						p-id="3685" fill="#d81e06"></path>
					<path
						d="M586.805 204.94v328.632h-34.37V204.94c0-25.666-22.622-46.57-50.469-46.57H84.836c-27.838 0-50.466 20.905-50.466 46.57v494.008c0 25.659 22.628 46.57 50.466 46.57h2.062a130.214 130.214 0 0 0-0.973 15.752c0 6.3 0.458 12.548 1.317 18.617h-2.406C38.037 779.888 0 743.571 0 698.948V204.94C0 160.316 38.037 124 84.836 124h417.129c46.801 0 84.84 36.316 84.84 80.94z"
						p-id="3686" fill="#d81e06"></path>
					<path
						d="M351.316 749.919c-7.79-66.049-64.099-117.43-132.209-117.43S94.688 683.87 86.898 749.919a130.243 130.243 0 0 0-0.973 15.753c0 6.299 0.458 12.547 1.317 18.617 9.051 64.672 64.729 114.565 131.865 114.565 67.137 0 122.814-49.894 131.865-114.565a133.155 133.155 0 0 0 1.317-18.617c0-5.325-0.344-10.595-0.973-15.753z m-132.21 114.565c-48.117 0-88.33-34.599-97.037-80.195a99.542 99.542 0 0 1-1.776-18.617c0-5.387 0.458-10.656 1.261-15.753 7.561-47.028 48.461-83.06 97.551-83.06s89.991 36.031 97.552 83.06c0.803 5.097 1.261 10.366 1.261 15.753a99.45 99.45 0 0 1-1.776 18.617c-8.706 45.597-48.918 80.195-97.036 80.195zM793.504 630.224c-73.428 0-133.183 59.744-133.183 133.183S720.076 896.59 793.504 896.59c73.438 0 133.182-59.744 133.182-133.183s-59.745-133.183-133.182-133.183z m0 231.995c-54.475 0-98.813-44.338-98.813-98.813s44.339-98.813 98.813-98.813c54.485 0 98.813 44.338 98.813 98.813s-44.328 98.813-98.813 98.813zM644.434 550.621a17.16 17.16 0 0 1-17.185 17.185H423.893a17.16 17.16 0 0 1-17.185-17.185c0-4.755 1.946-9.051 5.04-12.145a17.142 17.142 0 0 1 12.145-5.041h203.356c9.51 0.001 17.185 7.676 17.185 17.186zM644.434 688.1a17.16 17.16 0 0 1-17.185 17.185H423.893a17.16 17.16 0 0 1-17.185-17.185c0-4.755 1.946-9.051 5.04-12.145a17.141 17.141 0 0 1 12.145-5.04h203.356a17.16 17.16 0 0 1 17.185 17.185z"
						p-id="3687" fill="#d81e06"></path>
					<path
						d="M907.565 553.994c-72.129-14.32-144.247-28.642-216.365-42.962 3.502 4.609 7.015 9.208 10.517 13.812V224.109c-4.777 4.772-9.555 9.549-14.32 14.321h216.354c-4.117-2.366-8.246-4.727-12.363-7.093 19.344 42.99 38.699 85.975 58.044 128.959 12.038 26.74 24.076 53.479 36.114 80.224 3.066 6.808 6.132 13.621 9.197 20.435 2.081 4.643-0.884-10.964-0.884 1.623v299.991c4.766-4.771 9.543-9.549 14.32-14.321h-42.962c-18.472 0-18.472 28.642 0 28.642h42.962c7.81 0 14.32-6.517 14.32-14.32V460.901c0-9.644-4.329-17.297-8.245-25.984-11.814-26.264-23.641-52.533-35.466-78.803-20.889-46.408-41.776-92.822-62.664-139.23-2.015-4.458-7.742-7.093-12.374-7.093H687.396c-7.81 0-14.321 6.517-14.321 14.321v300.735c0 6.014 4.33 12.581 10.506 13.812 72.129 14.321 144.247 28.642 216.365 42.962 18.035 3.576 25.722-24.03 7.619-27.627z"
						fill="#d81e06" p-id="3688"></path>
					<path
						d="M154.795 288.658c43.776 43.779 87.552 87.558 131.328 131.331 5.516 5.516 14.734 5.521 20.25 0 41.882-41.882 83.762-83.765 125.642-125.647 13.07-13.067-7.18-33.323-20.25-20.25L306.511 379.349c-8.559 8.559-24.583 19.215-24.583 32.597v72.163c4.774-4.771 9.546-9.549 14.32-14.321H187.774c-18.469 0-18.469 28.642 0 28.642h211.278c18.469 0 18.469-28.642 0-28.642H296.248c-7.806 0-14.32 6.517-14.32 14.321V586.9c0 18.471 28.641 18.471 28.641 0V484.109c-4.774 4.772-9.546 9.549-14.321 14.321h102.804c18.469 0 18.469-28.642 0-28.642H187.774c-18.469 0-18.469 28.642 0 28.642h108.474c7.807 0 14.321-6.517 14.321-14.321v-66.524c0-15.747-9.361 7.574-0.232-1.555l22.84-22.84 98.838-98.847c13.07-13.067-7.18-33.323-20.25-20.25-41.882 41.882-83.762 83.765-125.642 125.647h20.25c-43.776-43.779-87.552-87.558-131.328-131.331-13.07-13.074-33.323 7.182-20.25 20.249z"
						fill="#d81e06" p-id="3689"></path>
				</svg>
				&nbsp;
				货到付款
			</view>
			<view>15天到货</view>
			<view>正品保证</view>
		</view>



		<view class="introduce-detile">
			<view>
				<image src="../../common/images/内容001.png"></image>
			</view>
			<view>
				<image src="../../common/images/woman.jpg"></image>
			</view>
			<view>
				<image src="../../common/images/woman.jpg"></image>
			</view>
			<view>
				<image src="../../common/images/woman.jpg"></image>
			</view>
		</view>


		<view class="detail-foot">
			<view>
				<view>
					<view>
						<svg t="1727276374381" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="4372" width="100%" height="100%">
							<path
								d="M959.716928 554.950208M532.429285 958.838931M64.446801 594.626859M270.969435 57.464783"
								fill="#8a8a8a" p-id="4373"></path>
							<path
								d="M583.719438 385.762901C664.377456 493.897713 810.145377 538.433022 810.145377 538.433022 799.252283 351.240643 687.435615 259.769348 510.411829 258.869862 298.641681 257.789251 175.627996 429.173596 222.010373 597.866646 222.00935 597.866646 580.769246 462.953957 583.719438 385.762901z"
								fill="#8a8a8a" p-id="4374"></path>
							<path
								d="M843.843874 721.201649c65.939805-16.944927 114.865097-15.887852 114.865097-150.871149 0-65.013713-38.867216-120.714316-93.980441-144.029324C824.128857 272.551466 697.718819 116.236328 507.890402 111.958908c-6.053879-0.135076-12.062733-0.157589-18.004049 0-183.887101 4.724605-309.892933 146.908908-324.069817 311.821865-58.44511 21.626553-102.44216 79.103616-100.462063 146.549727 4.432962 151.456481 66.321498 153.863297 148.712997 155.550729l0-293.098431c1.732457-125.304867 124.495432-264.293385 293.822932-264.293385 168.313404 0 261.415848 130.999566 302.464753 247.369947l0 301.380048c-8.28264 19.399839-30.449499 41.206494-70.936609 80.296791-52.819996 50.971905-128.907928 77.414137-128.907928 77.414137-8.844435 1.867534-15.078417 13.68365-12.603039 23.76424 2.475378 10.082636 13.253862 16.136515 21.605064 12.242835 0 0 80.274278-26.195615 140.430356-84.256986C819.492256 769.20392 843.640236 721.763444 843.843874 721.201649z"
								fill="#8a8a8a" p-id="4375"></path>
							<path
								d="M375.327224 624.215758m-37.46631 0a36.613 36.613 0 1 0 74.93262 0 36.613 36.613 0 1 0-74.93262 0Z"
								fill="#8a8a8a" p-id="4376"></path>
							<path
								d="M657.294131 624.215758m-37.46631 0a36.613 36.613 0 1 0 74.93262 0 36.613 36.613 0 1 0-74.93262 0Z"
								fill="#8a8a8a" p-id="4377"></path>
						</svg>
					</view>
					在线客服
				</view>
				<view>
					<view>
						<svg t="1727318726864" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="4332" width="100%" height="100%">
							<path
								d="M950.487 891.126c-1.67-6.605-6.697-16.517-15.063-26.43-3.39-3.297-8.366-8.233-15.063-16.517l-26.829-26.43-36.833-34.703c11.714-16.506 18.422-34.703 23.44-54.517 5.027-19.815 6.696-39.64 5.027-59.454-1.68-19.824-6.697-39.639-15.063-57.825-8.376-18.186-20.09-36.332-35.154-51.22-18.422-16.518-38.513-29.727-60.273-38.011-23.439-8.233-45.199-13.21-68.638-13.21-21.76 0-45.2 4.977-66.97 13.21-23.44 8.284-43.53 21.493-60.272 38.01-18.463 16.518-31.857 36.332-40.223 57.826-8.377 21.493-13.394 42.936-13.394 66.058 0 21.494 5.017 44.616 13.394 66.11 8.376 21.442 21.76 41.308 40.223 57.825 15.022 16.517 33.484 28.057 51.896 36.331 18.411 8.284 38.502 13.21 58.593 14.879 20.091 1.628 40.182 0 60.273-4.977 20.09-3.307 38.502-11.54 56.924-21.493l66.97 59.504c5.027 4.936 10.045 8.233 16.742 11.54 5.028 3.308 13.394 6.605 18.411 8.285 5.07 1.628 11.766 3.307 18.463 3.307 6.697 0 11.715-1.669 15.063-6.604 6.677-6.605 10.025-13.21 8.356-21.494zM804.782 730.91c-6.697 11.54-13.394 23.122-23.44 33.034-8.365 9.912-20.09 18.186-33.484 23.122-13.394 4.977-26.788 8.284-41.861 8.284s-28.457-1.67-41.851-8.284c-13.394-6.605-25.109-13.21-35.164-23.122-10.046-8.284-18.412-19.825-23.44-33.034-5.027-13.21-8.417-26.43-8.417-41.308 0-14.89 1.72-28.099 8.417-41.309 6.697-11.54 13.394-23.122 23.44-33.034 10.045-9.902 21.76-18.186 35.164-23.122 13.394-4.976 26.788-8.284 41.85-8.284s28.458 3.308 41.862 8.284c11.714 6.605 23.44 13.21 33.485 23.122 10.045 9.912 18.411 19.825 23.44 33.034 5.027 13.21 8.375 26.42 8.375 41.309 0 14.878-1.679 28.088-8.376 41.308z"
								p-id="4333" fill="#8a8a8a"></path>
							<path
								d="M463.217 701.174H228.782c-11.725 0-25.108-16.558-25.108-31.396 0-13.21 10.045-26.42 23.439-26.42h244.47c8.376-34.703 23.44-66.109 45.2-94.207H230.46c-11.724 0-20.09-14.848-20.09-28.058 0-13.21 10.045-28.098 23.439-28.098h336.548c18.462-14.848 38.553-26.42 61.993-33.035 30.136-13.21 63.62-21.493 97.106-21.493V233.626c0-57.826-15.074-97.465-78.685-97.465H567.02c1.679 4.936 1.679 9.913 1.679 14.848 0 36.373-23.44 71.035-50.227 71.035H284.078c-26.788 0-50.227-34.662-50.227-71.035 0-4.935 0-9.912 1.68-14.848h-83.754c-63.61 0-78.684 39.64-78.684 97.465V806.88c0 62.802 21.76 95.836 82.033 95.836h391.803C496.7 853.177 463.217 783.77 463.217 707.8v-6.625zM210.4 362.834c0.02-0.369 0.041-0.748 0.082-1.116 0-0.031 0-0.062 0.01-0.092 0.267-2.878 0.983-5.786 2.08-8.561 0.06-0.164 0.132-0.317 0.194-0.481l0.184-0.43c4.096-9.309 12.524-16.087 20.91-16.087H568.69c8.396 0 16.814 6.778 20.91 16.087l0.184 0.43c0.072 0.164 0.133 0.317 0.195 0.481 1.095 2.775 1.812 5.683 2.078 8.56 0 0.031 0 0.062 0.01 0.093 0.031 0.368 0.062 0.747 0.082 1.116 0.021 0.43 0.031 0.86 0.031 1.3 0 13.21-13.394 28.099-25.16 28.099H235.53c-11.766 0-25.16-14.889-25.16-28.099 0-0.43 0.01-0.87 0.031-1.3z"
								p-id="4334" fill="#8a8a8a"></path>
							<path
								d="M312.535 190.7h177.46c20.09 0 38.512-19.866 38.512-42.988s-16.743-42.936-38.513-42.936H312.535c-21.76 0-38.502 18.186-38.502 42.936 0 24.801 16.742 42.988 38.502 42.988z"
								p-id="4335" fill="#8a8a8a"></path>
						</svg>
					</view>
					订单查询
				</view>
			</view>
			<navigator class="navigoto" url="/pages/order/order">
				<view>
					<uni-icons class="ioc" type="cart" size="40rpx" color="#ffffff"></uni-icons>
					立即购买
				</view>
			</navigator>
		</view>


	</view>



	</template>


	<script>
		export default {
			data() {
				return {
					title: 'Hello',
					lunboima: 0,
					huise: 0
				}
			},
			onLoad() {

			},
			methods: {
				changelunbo(e, values) {
					console.log(e.target);
					// console.log(values);
					// this.lunboima++
					// if (this.lunboima > 2) {
					// 	this.lunboima = 0
					// }

					this.lunboima = values
					this.huise = values

				}
			}
		}
	</script>

	<style lang="scss" scoped>
		.detil-div {
			width: 100%;
			height: 130rpx;
		}

		.d-content {
			width: 750rpx;
			overflow: hidden;
		}

		.swiper-ima {
			width: 750rpx;
			height: 650rpx;
			margin: 0 auto;
			border-bottom: 1px solid #c8c8c8;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			margin-bottom: 5px;

			.swiper {
				width: 750rpx;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;
					position: relative;
					overflow: hidden;

					image {
						position: absolute;
						top: 50%;
						left: 50%;
						display: block;
						min-width: 100%;
						min-height: 100%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}

		.suoluetu {
			width: 750rpx;
			height: 170rpx;
			background-color: #e6e6e6;
			overflow: hidden;

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;

				.scroll-view-item_H {
					display: inline-block;

					text-align: center;
					margin-right: 5px;

					image {
						width: 150rpx;
						height: 150rpx;
						margin-top: 10rpx;
					}
				}
			}
		}

		.introduce {
			margin-top: 10px;
			margin-left: 15px;
			margin-bottom: 15px;

			>:nth-child(1) {
				width: 750rpx;
				height: 80rpx;

				text {

					line-height: 80rpx;
					font-size: 35rpx;
					font-weight: 500;
				}
			}

			>:nth-child(2) {
				width: 750rpx;
				height: 50rpx;
				font-size: 35rpx;
				font-weight: 500;
				color: #ff5500;

				text {
					line-height: 50rpx;
					font-weight: 600;
				}

				>:nth-child(1) {
					color: #ff5500;
				}

				>:nth-child(2) {
					font-size: 25rpx;
					color: #a5a5a5;
				}
			}


		}

		.baozheng {
			width: 750rpx;
			height: 80rpx;
			border: 2px solid #C8C8C8;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 250rpx;
				text-align: center;
				vertical-align: baseline;
			}
		}

		.introduce-detile {
			width: 750rpx;

			>view {
				width: 750rpx;
				height: 780rpx;
				position: relative;
				overflow: hidden;
			}

			image {
				position: absolute;
				top: 50%;
				left: 50%;
				display: block;
				min-width: 100%;
				min-height: 100%;
				transform: translate(-50%, -50%);
			}

			>view:last-child {
				margin-bottom: 40px;
			}
		}

		.detail-foot {
			width: 750rpx;
			height: 40px;
			position: fixed;
			z-index: 210;
			bottom: 0px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #ffffff;

			>view:nth-child(1) {
				width: 350rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				line-height: 40px;

				>view {
					height: 40px;
					width: 200rpx;
					font-size: 20rpx;
					display: flex;
					justify-content: center;


					>view {
						transform: translateY(20%);
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.navigoto {
				margin-right: 6px;
				width: 400rpx;
				height: 80%;
				border-radius: 40px;
				background-color: #ff5500;
				display: flex;
				justify-content: center;
				align-items: center;

				view {
					display: flex;
					justify-content: center;
					align-items: center;
					color: white;
					line-height: 40px;
					font-size: 25rpx;
					text-align: center;
				}
			}
		}

		.huise {
			-webkit-filter: grayscale(1);
			/* Webkit */
			filter: gray;
			/* IE6-9 */
			filter: grayscale(1);

		}
	</style>